<template>
    <div class="right">
        <div class="header">会员中心-我的积分</div>
        <div class="content">
            <div class="tabs">
                <div class="pointsTotal">{{ pointsTotal }} <span style="font-size: 24px;">分</span> </div>
                <div class="titkes">我的这些积分都可以<span style="color: #FF0000;">兑换商品</span>啦</div>
            </div>
            <div class="contents" v-loading="loading">
                <div class="items" v-for="(item, index) in list" :key="index">
                    <div class="right">
                        <div class="businessName">[ {{ item.businessName }} ]</div>
                        <div class="businessContent">{{ item.businessContent }}</div>
                        <div class="date">{{ item.createTime }}</div>
                        <div class="num"
                            :style="{ color: Number(item.operator + item.points) > 0 ? 'rgb(179, 173, 173)' : 'red' }">
                            {{ item.operator + item.points }}</div>
                    </div>
                </div>
            </div>
            <div class="paginations">
                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="getList" :layout="'prev, pager, next'"
                    :prevText="'上一页'" :nextText="'下一页'" />
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { pointsList } from '@/api/index'
const queryParams = ref({
    pageNum: 1, pageSize: 10
})
const list = ref([])
const loading = ref(false)
const total = ref(0)
const pointsTotal = ref(0)


const getList = async () => {
    loading.value = true
    const res = await pointsList(queryParams.value)
    res.rows.forEach(element => {
        element.createTime = element.createTime.split(' ')[0].replace(/-/g, "/")
    });
    total.value = res.total
    pointsTotal.value = res.rows[0].pointsTotal
    list.value = res.rows
    loading.value = false
}

onMounted(async () => {
    getList()
});
</script>
<style scoped lang="scss">
.right {
    width: calc(100% - 410px);
    height: 100%;

    .header {
        width: 100%;
        padding: 15px 0;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #000000;
        border-bottom: 1px solid #E6E6E6;
    }

    .content {
        width: 100%;
        height: calc(100% - 55px);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;
        box-sizing: border-box;
        padding: 40px 0 0 0;

        .tabs {
            width: 100%;
            height: 300px;

            .pointsTotal {
                font-family: Impact;
                font-weight: 400;
                font-size: 100px;
                color: #FF0000;
                text-align: center;
            }

            .titkes {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 24px;
                color: #959595;
                text-align: center;
                margin-top: 60px;
            }
        }

        .contents {
            width: 100%;
            height: calc(100% - 372px);
            display: flex;
            justify-content: flex-end;
            align-items: flex-start;
            flex-wrap: wrap;
            align-content: flex-start;
            overflow-y: auto;

            .items {
                width: 100%;
                height: 55px;
                border-bottom: 1px solid #E6E6E6;
                display: flex;
                align-items: center;
                justify-content: space-between;
                // padding: 20px 0;
                box-sizing: content-box;
                box-sizing: border-box;
                padding: 0 10px;


                .right {
                    width: 100%;
                    height: 51px;
                    display: flex;
                    align-items: center;

                    .businessName {
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 14px;
                    }

                    .businessContent {
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 14px;
                        flex: 1;
                        min-width: 0;
                        margin-left: 10px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .date {
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 14px;
                        color: #969696;
                    }

                    .num{
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 14px;
                        color: #969696;
                        width: 200px;
                        text-align: right;
                    }
                }
            }
        }

        .paginations {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    }
}
</style>